import React from 'react'
import { Home } from 'lucide-react'
import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from 'v1-components'

export default function LandingPage() {
  return (
    <div className="flex flex-col h-screen">
      <header className="bg-white p-4 shadow-md flex justify-between items-center">
        <h1 className="text-2xl font-bold">ShoeStore</h1>
        <Home className="w-8 h-8 text-black" />
      </header>
      <main className="flex-1 overflow-y-auto p-4 bg-gray-100">
        <h2 className="text-xl font-bold mb-4">Featured Products</h2>
        <div className="grid grid-cols-3 gap-4">
          <Card>
            <CardHeader>
              <CardTitle>Running Shoes</CardTitle>
            </CardHeader>
            <CardContent>
              <img src="https://images.unsplash.com/photo-1611334805352-26c3c8fd3a9d?w=800&dpr=2&q=80" alt="Running Shoes" className="rounded-md object-cover" />
            </CardContent>
            <CardDescription>
              <p>Perfect for all your running needs.</p>
            </CardDescription>
            <Button variant="outline">Buy Now</Button>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Walking Shoes</CardTitle>
            </CardHeader>
            <CardContent>
              <img src="https://images.unsplash.com/photo-1611334805352-26c3c8fd3a9d?w=800&dpr=2&q=80" alt="Walking Shoes" className="rounded-md object-cover" />
            </CardContent>
            <CardDescription>
              <p>Comfortable shoes for everyday use.</p>
            </CardDescription>
            <Button variant="outline">Buy Now</Button>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>Sports Shoes</CardTitle>
            </CardHeader>
            <CardContent>
              <img src="https://images.unsplash.com/photo-1611334805352-26c3c8fd3a9d?w=800&dpr=2&q=80" alt="Sports Shoes" className="rounded-md object-cover" />
            </CardContent>
            <CardDescription>
              <p>High performance shoes for all sports.</p>
            </CardDescription>
            <Button variant="outline">Buy Now</Button>
          </Card>
        </div>
      </main>
      <footer className="bg-white p-4 shadow-md">
        <p>&copy; 2022 ShoeStore. All rights reserved.</p>
      </footer>
    </div>
  )
}
